<template>
	<mescroll-uni v-if="scrollHeight" :height="scrollHeight" :fixed="false" ref="mescrollRef" @init="mescrollInit"
		@down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
		<view v-if="hasBanner">
			<w-banner :content="banner.content" :styles="banner.styles" />
		</view>
		<view :class="['goods-container', `goods-container-${goodsStyle}`]">
			<view class="goods-item" @tap="goGoodsDetail(item.id)" v-for="item in goodsList" :key="item.id">
				<goods-card :shape="goodsStyle" :name="item.name" :image="item.image" :price="item.sell_price"
					:goods_model="item.goods_model" :goods_code="item.code" :goods_stock="item.total_stock"
					:minPrice="item.lineation_price" :fieldShowHide="fieldShowHide" :fieldStyles="fieldStyles"
					:prefix="price_symbol" :spec_id="item.spec_id" :spec_type="item.spec_type" :aux_arr="item.aux_arr"
					:member_price="item.member_price" :spec_value="item.spec_value" :goods_id="item.id"
					:spec_value_list="item.spec_value_list" :tag_desc="item.tag_desc" :aux_def_id="item.aux_def_id"
					:cart_goods_ids="cartGoodsIds" :cart_goods_arr="cartGoodsArr" @updateCartList="getCartList"
					:understock_order_enabled="understock_order_enabled" fromPage='category' />
			</view>
		</view>
		<w-jishuzhichi :class="[customClass]" />
	</mescroll-uni>
</template>

<script type="text/javascript">
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGoodsLists
	} from '@/api/goods'
	import {
		apiCartLists
	} from "@/api/store";
	import category from './category.js'
	import Cache from '@/utils/cache'
	export default {
		mixins: [category, MescrollMixin],
		props: {
			content: {
				type: Object,
				default: () => {},
			},
			fieldShowHide: {
				type: Object,
				default: () => {},
			},
			fieldStyles: {
				type: [Object, Array]
			},
			goodsStyle: {
				type: String,
				default: 'rectangle'
			},
			scrollHeight: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {

				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/shop.png'),
						tip: this.$zhTran('暂无商品~'), // 提示
						fixed: false,
					},
					toTop: {
						bottom: 300
					}
				},
				category: {},
				goodsList: [],
				price_symbol: '￥',
				cartGoodsIds: [],
				cartGoodsArr: [],
				understock_order_enabled: 0
			}
		},
		methods: {
			// 上拉加载更多
			upCallback(page) {
				const pageNum = page.num
				const pageSize = page.size

				apiGoodsLists({
					page_no: pageNum,
					page_size: pageSize,
					category_id: this.category.id,
					clsp_id: Cache.get('clsp_id')
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					// 如果是第一页需手动置空列表
					if (page.num == 1) this.goodsList = []
					// 重置列表数据
					this.goodsList = this.goodsList.concat(lists)
					this.mescroll.endBySize(lists.length, count)
					this.price_symbol = extend.price_symbol
					this.understock_order_enabled = extend.understock_order_enabled
				}).catch(() => {
					this.mescroll.endErr()
				})
			},

			// 跳转商品详情
			goGoodsDetail(id) {
				this.$Router.push({
					path: '/bundle2/pages/goods_detail/goods_detail',
					query: {
						id
					}
				})
			},
			async getCartList() {
				await apiCartLists().then((res) => {
					this.cartGoodsIds = res.lists.map(item => {
						return item.goods_id
					})
					this.cartGoodsArr = res.lists.map(item => {
						return {
							goods_id: item.goods_id,
							num: item.goods_num,
							cart_id: item.id
						}
					})
				});
			},
		},
		computed: {
			customClass() {
				var style = []

				if (this.goodsList.length == 0) style.push('jishuzhichi-nodata')

				if ([1, 9].indexOf(this.content.style) > -1) style.push('halfwith')

				return style
			},
			hasBanner() {
				return this.banner && this.selectIndex2 == -1
			}
		},
		watch: {
			selectIndex: {
				handler(val) {
					if (this.selectIndex2 > -1 && this.parent.lists[val].sons != undefined) {
						this.category = this.parent.lists[val].sons[this.selectIndex2] || {}
					} else {
						this.category = this.parent.lists[val] || {}
					}
					this.goodsList = []
					this.mescroll.resetUpScroll();
				}
			},
			selectIndex2: {
				handler(val) {
					this.category = this.parent.lists[this.selectIndex]?.sons[val] || {}
					this.goodsList = []
					this.mescroll.resetUpScroll();
				}
			}
		},
		created() {
			this.getCartList()
		}
	};
</script>

<style lang="scss" scoped>
	.goods-container {
		display: flex;
		padding: 0 20rpx;

		&-square {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		&-rectangle {
			flex-direction: column;
		}

		.goods-item {
			margin-top: 20rpx;
		}
	}

	.halfwith {
		width: calc(100% - 180rpx);
	}
</style>